/**
 *
 *
 * @author TOTORO
 * @date 2021/8/11 12:02
 */

$(function () {
    // 点击我要留言，展开留言板
    $(".need_leaveAMessage").click(function () {
        var isShow = $("#leaveAMessagePanel").css("display");
        if(isShow == "none"){
            $("#leaveAMessagePanel").fadeIn(300);
        } else{
            $("#leaveAMessagePanel").fadeOut(300);
        }
    });

    // 点击上传图片
    $("#uploadImageBtn").click(function () {
        var that = $(this);
        // 生成一个临时的file input
        var $fileInput = $("<input type='file' style='display: none' name='eImages' class='image-input'>");
        $fileInput.click();
        // 如果上传了图片，则生成DOM
        $fileInput.change(function () {
            var file = $(this);
            var $imageLi = $("<li>" +
                "<div class='img'>" +
                "<img src='' style='width: 90px; height: 90px;'/>" +
                "</div>" +
                "<span class='img-desc'>添加说明</span>" +
                "<input type='hidden' name='instruction' value='添加说明'>"+
                "<span class='delete-icon'></span>" +
                "</li>");
            $imageLi.append($fileInput);
            $(".uploader-trigger").before($imageLi);
            Totoro.html5Reader(file, $imageLi.find("img"));
            // 如果图片有十个了！
            if($(".image-input").length == 10){
                that.parent().hide();
            }
        })
    });

    // 点击删除图片
    $(".pic-uploader-wrapper").on("click", ".delete-icon", function () {
        $(this).parent().remove();
        if($(".uploader-trigger").css("display") == 'none'){
            $(".uploader-trigger").show();
        }
    });

    // 点击添加文字描述
    $(".pic-uploader-wrapper").on("click", ".img-desc", function () {
        // 获得当前图片
        var imgPath = $(this).prev().find("img").attr("src");
        $nowInputImage = $(this);
        $("body").css({"overflow":"hidden", "padding-right":"16"});
        var $inputCheckBox = $("                        <div class='upload-img-preview-mask'>\n" +
            "                                <div class='upload-img-preview-wrapper'>\n" +
            "                                    <div class='upload-img-preview-content'>\n" +
            "                                        <div class='upload-preview-img'>\n" +
            "                                            <div class='pfm-img-preview'>\n" +
            "                                                <div class='viewer-container'>\n" +
            "                                                    <div class='viewer-canvas'>\n" +
            "                                                        <img src='"+imgPath+"' style='width: 297px; height: 212.3px; margin-left: 808.5px; margin-top: 176.85px; transform: rotate(0deg) scaleX(1) scaleY(1);'>\n" +
            "                                                    </div>\n" +
            "                                                    <div class='viewer-close'>\n" +
            "                                                    </div>\n" +
            "                                                </div>\n" +
            "                                            </div>\n" +
            "                                        </div>\n" +
            "                                        <div class='img-desc-edit'>\n" +
            "                                            <span class='img-desc-edit-title'></span>\n" +
            "                                            <textarea class='img-desc-edit-area' rows='4' maxlength='50' placeholder='请输入凭证说明'>"+($(this).text()!='添加说明'?$(this).text():'')+"</textarea>\n" +
            "                                            <span class='remainder'>50</span>\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </div>");
        $("#uipmAfter").before($inputCheckBox);
    });

    // 关闭文字描述大面板
    $("body").on("click", ".viewer-close", function () {
        // 获得输入的文字，渲染在图片描述上
        var text = $(".img-desc-edit-area").val();
        $nowInputImage.text(text);
        $nowInputImage.next().val(text);
        $(".upload-img-preview-mask").remove();
        $("body").prop("style", "");
    })

    $("body").on("click", ".viewer-container", function () {
        $(".viewer-close").click();
    });

    // 点击提交，做判断
    $("#addNegotiateHistory").submit(function () {
        // 用户是否输入了文本
        var textLength = $("#nhText").val().length;
        if(textLength < 1){
            $("#nhText").addClass("arrow_box");
            $("#nhText").prop("placeholder", "请输入协商内容。");
            return false;
        }
        // 验证通过，先保存一次参数
        var bizOrderId = Totoro.getQueryVariable("bizOrderId");
        var detailId = Totoro.getQueryVariable("detailId");
        var bizReturnId = Totoro.getQueryVariable("bizReturnId");
        $.ajaxSettings.async = false;
        $.post("/dispute_logic/saveBeforeParam.htm", {"bizOrderId": bizOrderId, "detailId": detailId, "bizReturnId": bizReturnId})
        // 提交表单
    });

    // 进入文本域，关闭呼吸灯
    $("#nhText").focus(function () {
        $(this).removeClass("arrow_box");
        $(this).prop("placeholder", "");
    });


    // 第二步 买家确认发货--------------------------------------
    $("#alreadyShip").click(function () {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.confirm('是否确认发货?', {icon: 3, title: '天猫售后'}, function (index) {
                var bizReturnId = Totoro.getQueryVariable("bizReturnId");
                $.post("/dispute_logic/buyerShip.htm", {"bizReturnId": bizReturnId}, function (res) {
                    window.location.href = res;
                })
                layer.close(index);
            });
        })
    });
})
